<template>

    <a-spin :loading="loading" :tip="loading ? '提交中...' : ''" style="display: flex;">

        <div class="w-[80%] mx-auto form-container" >
            <a-form :model="formData" ref="formRef" @submit="handleSubmit">
                <a-form-item :label="item.title" v-for="item in setting" :key="item.id">
                    <a-input v-if="item.type === 'text'" allow-clear v-model="formData[item.name]" />

                    <div v-else>
                        {{ item.type }}
                    </div>
                </a-form-item>

                <a-form-item>
                    <a-space>
                        <a-button type="primary" html-type="submit">提交</a-button>
                        <a-button type="primary" @click="handleReset">重置</a-button>
                    </a-space>
                </a-form-item>
            </a-form>
        </div>

    </a-spin>

</template>

<script setup lang="ts">
import { updateWebSetting } from '@/api/system/setting/web_setting'
const props = withDefaults(defineProps<{
    setting: any
}>(), {
    setting: () => ({})
})
const formRef = ref()
const loading = ref(false)
const formData = reactive<Record<string, string>>({
    web_name: '',
})

onMounted(() => {
    props.setting.forEach((item: any) => {
        formData[item.name] = item.value || ''
    })
})

const handleSubmit = async () => {
    try {
        loading.value = true
        await updateWebSetting(formData)
        loading.value = false
        formRef.value?.resetFields()
    } catch (error) {
        loading.value = false
    }
}

const handleReset = async () => {
    props.setting.forEach((item: any) => {
        formData[item.name] = item.value || ''
    })
    formRef.value?.resetFields()
}
</script>

<style scoped lang="scss">
.form-container {
    background-color: var(--color-fill-2);
    padding: 20px;
    border-radius: 10px;

    .arco-form{
        padding: 20px !important;
        background-color: var(--color-bg-2)!important;
    }
}
</style>
